<template>
  <PageMain>
    <template #header></template>
    <template #body>
      <div class="flex flex-col h-full overflow-hidden p-[24px]">
        <div
          class="w-full min-h-[200px] bg-gradient-to-b from-[#e8efff] to-white rounded-lg p-[24px] flex flex-row shrink-0"
        >
          <div class="flex flex-col justify-between mb-4 w-1/2">
            <div class="text-2xl text-[#394d73] leading-8 mb-4">科学研究数据资产</div>
            <AssetField label="资产编号" value="2021070100001" />
            <AssetField label="资产名称" value="科学研究数据资产" />
            <AssetField label="资产类别" value="无形资产" />
          </div>
          <div class="flex flex-row justify-end w-1/2 items-end">
            <div class="flex flex-row">
              <AssetCard label="已摊销金额" value="1000" :icon="QCYE" />
              <AssetCard label="待摊销金额" value="1000" :icon="BQZJJE" />
            </div>
          </div>
        </div>
        <div class="overflow-auto">
          <a-tabs default-active-key="1">
            <a-tab-pane key="1" title="摊销计划">
              <AmortizePlanTable :table-data="tableData" />
            </a-tab-pane>
            <a-tab-pane key="2" title="摊销明细">
              <AmortizeDetailTable />
            </a-tab-pane>
            <a-tab-pane key="3" title="凭证"> Content of Tab Panel 2 </a-tab-pane>
          </a-tabs>
        </div>
      </div>
    </template>
  </PageMain>
</template>

<script lang="ts" setup>
import PageMain from '@/components/PageBox.vue';
import BQZJJE from '@/assets/images/amortize/bqzjje.png';
import QCYE from '@/assets/images/amortize/qcye.png';
import AssetField from '../../components/AssetField.vue';
import AssetCard from '../../components/AssetCard.vue';

import AmortizePlanTable from './AmortizePlanTable.vue';
import AmortizeDetailTable from './AmortizeDetailTable.vue';

// tableData
const tableData = [
  {
    periodicity: '2021年1月',
    amortization_step: '1/10',
    amount: '100',
    time: '2021-01-01'
  },
  {
    periodicity: '2021年2月',
    amortization_step: '2/10',
    amount: '100',
    time: '2021-02-01'
  },
  {
    periodicity: '2021年3月',
    amortization_step: '3/10',
    amount: '100',
    time: '2021-03-01'
  },
  {
    periodicity: '2021年4月',
    amortization_step: '4/10',
    amount: '100',
    time: '2021-04-01'
  },
  {
    periodicity: '2021年5月',
    amortization_step: '5/10',
    amount: '100',
    time: '2021-05-01'
  },
  {
    periodicity: '2021年6月',
    amortization_step: '6/10',
    amount: '100',
    time: '2021-06-01'
  },
  {
    periodicity: '2021年7月',
    amortization_step: '7/10',
    amount: '100',
    time: '2021-07-01'
  },
  {
    periodicity: '2021年8月',
    amortization_step: '8/10',
    amount: '100',
    time: '2021-08-01'
  },
  {
    periodicity: '2021年9月',
    amortization_step: '9/10',
    amount: '100',
    time: '2021-09-01'
  },
  {
    periodicity: '2021年10月',
    amortization_step: '10/10',
    amount: '100',
    time: '2021-10-01'
  }
];
</script>
